<template>
  <div style="background-color: #f6f7f9;">
    <van-sticky>
      <van-nav-bar title="评价订单" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
      <van-image
          class="logo"
          width="180px"
          height="180px"
          fit="contain"
          :src="require('../../assets/evaluate.png')"
      />
    </van-sticky>
    <h4 style="text-align: left; margin-left: 20px;">订单号：{{ evaluateInfo.orderSn }}</h4>
    <h4 style="text-align: left; margin-left: 40px;">五星评分</h4>
    <van-cell-group inset>
      <van-cell style="text-align: left">
        <template #title>
          <span style="padding: 15px;">服务态度</span>
          <van-rate v-model="attitude" style="margin-left: 20px;"/>
        </template>
      </van-cell>
      <van-cell style="text-align: left">
        <template #title>
          <span style="padding: 15px;">配送速度</span>
          <van-rate v-model="speed" style="margin-left: 20px;"/>
        </template>
      </van-cell>
      <van-cell style="text-align: left">
        <template #title>
          <span style="padding: 15px;">位置准确</span>
          <van-rate v-model="position" style="margin-left: 20px;"/>
        </template>
      </van-cell>
    </van-cell-group>

    <h4 style="text-align: left; margin-left: 40px;">文字评论</h4>
    <van-cell-group inset>
      <van-field
          v-model="evaluateInfo.userEvaluate"
          rows="2"
          autosize
          label="评价内容"
          type="textarea"
          maxlength="100"
          placeholder="请输入您的评价，不多余100个字"
          show-word-limit
      />
    </van-cell-group>
    <van-button round type="info" @click="submitEvaluate" style="margin: 15px; width: 200px;">提交</van-button>
  </div>

</template>

<script>
export default {
  name: "orderEvaluate",
  data() {
    return {
      attitude:0,
      speed:0,
      position:0,
      evaluateInfo:{
        orderSn:'',
        userScore:0,
        userEvaluate:'',
        staffId:'',
        orderId:'',
      }
    };
  },
  methods:{
    loadEvaluateInfo(){
      let id = localStorage.getItem('orderId');
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/' + id + '/detail';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        this.evaluateInfo.orderSn=responseBody.sn
        this.evaluateInfo.staffId=responseBody.staffId;
        this.evaluateInfo.orderId=responseBody.id;
        console.log("当前表单数据->>>>>>", this.evaluateInfo);
      })
    },
    submitEvaluate(){
      let url = 'http://localhost:9080/evaluates/add-new';
      this.evaluateInfo.userScore= this.attitude+this.speed+this.position;
      let evaluateInfo = this.qs.stringify(this.evaluateInfo, {arrayFormat: 'repeat'});
      console.log('evaluateInfo = ' + evaluateInfo);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, evaluateInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('评价成功!');
          this.$router.replace("/home/order-list");
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    }
  },
  mounted() {
    this.loadEvaluateInfo();
  }
}
</script>

<style scoped>

</style>
